Navigeerimise API valdamine: üheleheküljeliste rakenduste marsruutimine ja ajaloo haldamine

Navigeerimise API (Navigation API) kujutab endast olulist edasiminekut viisis, kuidas me haldame marsruutimist ja ajalugu üheleheküljelistes rakendustes (SPA). Traditsioonilised meetodid tuginevad sageli `window.location` objekti manipuleerimisele või kolmandate osapoolte teekide kasutamisele. Kuigi need lähenemised on meid hästi teeninud, pakub Navigeerimise API sujuvamat, jõudlusvõimelisemat ja funktsioonirikkamat lahendust, andes arendajatele suurema kontrolli kasutaja navigeerimiskogemuse üle.

Mis on Navigeerimise API?

Navigeerimise API on kaasaegne veebilehitseja API, mis on loodud lihtsustama ja täiustama viisi, kuidas üheleheküljelised rakendused (SPA-d) haldavad navigeerimist, marsruutimist ja ajalugu. See tutvustab uut `navigation` objekti, mis pakub meetodeid ja sündmusi, mis võimaldavad arendajatel pealt kuulata ja kontrollida navigeerimissündmusi, uuendada URL-i ja säilitada järjepidevat sirvimisajalugu ilma lehe täieliku uuestilaadimiseta. Tulemuseks on kiirem, sujuvam ja reageerimisvõimelisem kasutajakogemus.

Navigeerimise API kasutamise eelised

• Parem jõudlus: Eemaldades lehe täielikud uuestilaadimised, parandab Navigeerimise API oluliselt SPA-de jõudlust. Üleminekud erinevate vaadete vahel muutuvad kiiremaks ja sujuvamaks, mis viib kaasahaaravama kasutajakogemuseni.
• Suurem kontroll: API pakub peeneteralist kontrolli navigeerimissündmuste üle, võimaldades arendajatel pealt kuulata ja muuta navigeerimiskäitumist vastavalt vajadusele. See hõlmab navigeerimise takistamist, kasutajate ümbersuunamist ja kohandatud loogika täitmist enne või pärast navigeerimist.
• Lihtsustatud ajaloo haldamine: Veebilehitseja ajaloo haldamine on Navigeerimise API-ga tehtud lihtsamaks. Arendajad saavad programmiliselt lisada, asendada ja liikuda ajaloo kirjete vahel, tagades järjepideva ja prognoositava sirvimiskogemuse.
• Deklaratiivne navigeerimine: Navigeerimise API julgustab deklaratiivsemat lähenemist marsruutimisele, võimaldades arendajatel määratleda navigeerimisreegleid ja -käitumist selgel ja kokkuvõtlikul viisil. See parandab koodi loetavust ja hooldatavust.
• Integratsioon kaasaegsete raamistikega: Navigeerimise API on loodud sujuvaks integreerimiseks kaasaegsete JavaScripti raamistike ja teekidega, nagu React, Angular ja Vue.js. See võimaldab arendajatel kasutada API funktsioone oma olemasolevates arendustöövoogudes.

Põhimõisted ja funktsioonid

1. `navigation` objekt

Navigeerimise API süda on `navigation` objekt, millele pääseb ligi globaalse `window` objekti kaudu (st `window.navigation`). See objekt pakub juurdepääsu erinevatele navigeerimisega seotud omadustele ja meetoditele, sealhulgas:

• `currentEntry`: Tagastab `NavigationHistoryEntry` objekti, mis esindab praegust kirjet navigeerimisajaloos.
• `entries()`: Tagastab massiivi `NavigationHistoryEntry` objektidest, mis esindavad kõiki kirjeid navigeerimisajaloos.
• `navigate(url, { state, info, replace })`: Navigeerib uuele URL-ile.
• `back()`: Navigeerib tagasi eelmisele ajalookirjele.
• `forward()`: Navigeerib edasi järgmisele ajalookirjele.
• `reload()`: Laeb praeguse lehe uuesti.
• `addEventListener(event, listener)`: Lisab sündmusekuulaja navigeerimisega seotud sündmustele.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` liides esindab ühte kirjet navigeerimisajaloos. See annab teavet kirje kohta, näiteks selle URL-i, oleku ja unikaalse ID.

• `url`: Ajalookirje URL.
• `key`: Ajalookirje unikaalne identifikaator.
• `id`: Teine unikaalne identifikaator, mis on eriti kasulik navigeerimissündmuse elutsükli jälgimiseks.
• `sameDocument`: Boolean väärtus, mis näitab, kas navigeerimine toimub sama dokumendi piires.
• `getState()`: Tagastab ajalookirjega seotud oleku (mis on määratud navigeerimise käigus).

3. Navigeerimissündmused

Navigeerimise API käivitab mitu sündmust, mis võimaldavad arendajatel jälgida ja kontrollida navigeerimiskäitumist. Nende sündmuste hulka kuuluvad:

• `navigate`: Käivitatakse, kui navigeerimine algatatakse (nt lingil klõpsates, vormi esitades või kutsudes `navigation.navigate()`). See on peamine sündmus navigeerimistaotluste pealtkuulamiseks ja käsitlemiseks.
• `navigatesuccess`: Käivitatakse, kui navigeerimine lõpeb edukalt.
• `navigateerror`: Käivitatakse, kui navigeerimine ebaõnnestub (nt võrguvea või käsitlemata erandi tõttu).
• `currentchange`: Käivitatakse, kui praegune ajalookirje muutub (nt edasi või tagasi navigeerides).
• `dispose`: Käivitatakse, kui `NavigationHistoryEntry` pole enam kättesaadav, näiteks kui see eemaldatakse ajaloost `replaceState` toimingu käigus.

Marsruutimise rakendamine Navigeerimise API abil: praktiline näide

Illustreerime, kuidas kasutada Navigeerimise API-d lihtsa marsruutimise rakendamiseks üheleheküljelises rakenduses. Oletame, et rakendusel on kolm vaadet: Avaleht, Meist ja Kontakt.

Esmalt looge funktsioon marsruudi muudatuste käsitlemiseks:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
  }
}

Järgmiseks lisage sündmusekuulaja `navigate` sündmusele:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Prevent default browser navigation

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Resolve the promise after route handling
  });

  event.transition = promise;
});

See kood kuulab pealt `navigate` sündmust, eraldab URL-i `event.destination` objektist, takistab veebilehitseja vaikimisi navigeerimist, kutsub sisu uuendamiseks `handleRouteChange` ja määrab `event.transition` lubaduse. `event.transition` määramine tagab, et veebilehitseja ootab sisu uuendamise lõpuleviimist enne lehe visuaalset uuendamist.

Lõpuks saate luua lingid, mis käivitavad navigeerimise:

Home | About | Contact

Ja lisage neile linkidele klõpsukuulaja:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

See seab üles põhilise kliendipoolse marsruutimise, kasutades Navigeerimise API-d. Nüüd käivitab linkidele klõpsamine navigeerimissündmuse, mis uuendab `content` div-i sisu ilma lehe täieliku uuestilaadimiseta.

Oleku haldamise lisamine

Navigeerimise API võimaldab ka seostada olekut iga ajalookirjega. See on kasulik andmete säilitamiseks navigeerimissündmuste vahel. Muudame eelmist näidet, et lisada olekuobjekt.

Kutsudes välja `navigation.navigate()`, saate edastada `state` objekti:

window.navigation.navigate('/about', { state: { pageTitle: 'About Us' } });

`navigate` sündmusekuulaja sees saate olekule juurde pääseda, kasutades `event.destination.getState()`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'My App'; // Default title

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      title = 'Home';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
      title = '404 Not Found';
  }
  document.title = title;
}

Selles muudetud näites võtab `handleRouteChange` funktsioon nüüd vastu `state` parameetri ja kasutab seda dokumendi pealkirja uuendamiseks. Kui olekut ei edastata, on vaikeväärtuseks 'My App'.

`navigation.updateCurrentEntry()` kasutamine

Mõnikord võite soovida uuendada praeguse ajalookirje olekut ilma uut navigeerimist käivitamata. Meetod `navigation.updateCurrentEntry()` võimaldab teil seda teha. Näiteks kui kasutaja muudab praegusel lehel seadistust, saate olekut uuendada, et see muudatus kajastuks:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Updated setting:', setting, 'to', value);
}

// Example usage:
updateUserSetting('theme', 'dark');

See funktsioon hangib praeguse oleku, ühendab selle uuendatud seadistusega ja seejärel uuendab praegust ajalookirjet uue olekuga.

Täpsemad kasutusjuhud ja kaalutlused

1. Vormide esitamise käsitlemine

Navigeerimise API-d saab kasutada vormide esitamise käsitlemiseks SPA-des, vältides lehe täielikku uuestilaadimist ja pakkudes sujuvamat kasutajakogemust. Saate pealt kuulata vormi esitamise sündmust ja kasutada `navigation.navigate()`, et uuendada URL-i ja kuvada tulemusi ilma lehe täieliku uuestilaadimiseta.

2. Asünkroonsed operatsioonid

Navigeerimissündmuste käsitlemisel võib tekkida vajadus teostada asünkroonseid operatsioone, näiteks andmete pärimine API-st. Omadus `event.transition` võimaldab teil seostada navigeerimissündmusega lubaduse (promise), tagades, et veebilehitseja ootab asünkroonse operatsiooni lõpuleviimist enne lehe uuendamist. Vaadake ülaltoodud näiteid.

3. Kerimisasendi taastamine

Kerimisasendi säilitamine navigeerimise ajal on hea kasutajakogemuse pakkumiseks ülioluline. Navigeerimise API pakub mehhanisme kerimisasendi taastamiseks ajaloos edasi-tagasi liikudes. Saate kasutada `NavigationHistoryEntry` omadust `scroll`, et salvestada ja taastada kerimisasendit.

4. Vigade käsitlemine

On oluline käsitleda vigu, mis võivad navigeerimise ajal tekkida, näiteks võrguvead või käsitlemata erandid. Sündmus `navigateerror` võimaldab teil neid vigu sujuvalt kinni püüda ja käsitleda, vältides rakenduse kokkujooksmist või kasutajale veateate kuvamist.

5. Progressiivne täiustamine

SPA-de ehitamisel Navigeerimise API-ga on oluline arvestada progressiivse täiustamisega. Veenduge, et teie rakendus töötab korrektselt ka siis, kui veebilehitseja Navigeerimise API-d ei toeta. Saate kasutada funktsioonituvastust, et kontrollida `navigation` objekti olemasolu ja vajadusel lülituda tagasi traditsioonilistele marsruutimismeetoditele.

Võrdlus traditsiooniliste marsruutimismeetoditega

Traditsioonilised marsruutimismeetodid SPA-des tuginevad sageli `window.location` objekti manipuleerimisele või kolmandate osapoolte teekide, nagu `react-router` või `vue-router`, kasutamisele. Kuigi need meetodid on laialt levinud ja väljakujunenud, on neil mõningaid piiranguid:

• Lehe täielikud uuestilaadimised: `window.location` otse manipuleerimine võib käivitada lehe täieliku uuestilaadimise, mis võib olla aeglane ja kasutajakogemust häiriv.
• Keerukus: Ajaloo ja oleku haldamine traditsiooniliste meetoditega võib olla keeruline ja vigaderohke, eriti suurtes ja keerulistes rakendustes.
• Jõudluse lisakulu: Kolmandate osapoolte marsruutimisteegid võivad lisada märkimisväärset jõudluse lisakulu, eriti kui neid ei ole optimeeritud teie rakenduse spetsiifilistele vajadustele.

Navigeerimise API lahendab need piirangud, pakkudes sujuvamat, jõudlusvõimelisemat ja funktsioonirikkamat lahendust marsruutimiseks ja ajaloo haldamiseks. See välistab lehe täielikud uuestilaadimised, lihtsustab ajaloo haldamist ja pakub peeneteralist kontrolli navigeerimissündmuste üle.

Veebilehitsejate ühilduvus

2024. aasta lõpu seisuga on Navigeerimise API-l hea tugi kaasaegsetes veebilehitsejates, sealhulgas Chrome, Firefox, Safari ja Edge. Siiski on alati hea tava kontrollida uusimat veebilehitsejate ühilduvuse teavet ressurssidest nagu Can I use enne Navigeerimise API rakendamist oma toodangurakendustes. Kui vanemate veebilehitsejate tugi on hädavajalik, kaaluge polüfilli või varumehhanismi kasutamist.

Kokkuvõte

Navigeerimise API on võimas tööriist kaasaegsete, jõudluspõhiste SPA-de ehitamiseks, millel on täiustatud marsruutimise ja ajaloo haldamise võimalused. API funktsioone kasutades saavad arendajad luua kiiremaid, sujuvamaid ja kaasahaaravamaid kasutajakogemusi. Kuigi esialgne õppimiskõver võib olla veidi järsem võrreldes lihtsamate ja vanemate meetoditega, teevad Navigeerimise API eelised, eriti keerulistes rakendustes, selle investeeringu väärt. Võtke Navigeerimise API omaks ja avage oma SPA-de täielik potentsiaal.

Lisalugemist

• MDN Web Docs: Navigeerimise API
• WICG Navigeerimise API spetsifikatsioon